<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>关于我</title>
	<link rel="stylesheet" type="text/css" href="CSS/font-awesome-4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>

	<div id="header">
		<div class="container table">
			<div class="vertial-center text-center">
				<h3>我是xxx</h3>
			  <p>学习能力强，喜欢前端</p><br>
			  <a class="btn1 btn-bigger" href="#">查看更多</a>
			</div>
		</div>
	</div>

	<div id="content">
		<div class="intro">
			<div class="container">
				<h3>一句话介绍自己</h3>
				<span>介绍自己的话</span>
				<a href="">作品</a>
			</div>	
		</div>

		<div class="job-skill">
			<div class="container">
				<h2>我的技能</h2>
				<ul class="clearfix">
					<li>
						<span class="fa fa-html5 fa-3x"></span>	
						<h4>HTML&CSS</h4>
						<p>html5&css3相关技能...</p>
					  <a class="btn2" href="#">相关作品</a>
					</li>

					<li>
						<span class="fa fa-table fa-3x"></span>
						<h4>javascript</h4>
						<p>插件、常见效果</p>
						<a class="btn2" href="#">相关作品</a>
					</li>

					<li>
						<span class="fa fa-file fa-3x"></span>
						<h4>项目</h4>
						<p>XXX XXX项目</p>
						<a class="btn2" href="#">我的项目</a>	
					</li>

					<li>
						<span class="fa fa-github-square fa-3x"></span>
						<h4>个人博客</h4>
						<p>学习经历</p>
						<a class="btn2" href="#">博客地址</a>
					</li>

				</ul>
			</div>
		</div>

		<div class="slogan">
			<div class="container">
				<h1>前端工程师也需要匠人之心</h1>
			</div>
		</div>

		<div class="portfolio">
			<div class="container text-center">
				<h2>作品</h2>
				<ul class="clearfix">
					<li><a href="#" class="portfolio-pic1"><img src="image/portfolio-1.jpg" alt=""></a></li>
					<li><a href="#" class="portfolio-pic2"><img src="image/portfolio-2.jpg" alt=""></a></li>
					<li><a href="#" class="portfolio-pic3"><img src="image/portfolio-3.jpg" alt=""></a></li>
					<li><a href="#" class="portfolio-pic4"><img src="image/portfolio-4.jpg" alt=""></a></li>
				</ul>
				<a class="btn2" href="#">查看更多</a>
			</div>
		</div>

		<div class="call-to-action">
			<div class="container text-center">
				<h3>我是一个勤奋的人</h3>
				<a href="#" class="btn2">Click Me</a>
				<a href="#" class="btn3">Look at Me!</a>
			</div>
		</div>
	</div>

	<div id="footer">
		<div class="container">
			<h3>我的信息</h3>
			<p>XX省xx市</p>
			<p>xxx县</p>
			<ul class="contact-information">
        <li><span class="fa fa-phone">(123)456-7890</span></li>
        <li><span class="fa fa-envelope"><a href="#">name@example.com</a></span></li>
      </ul>
      <ul class="contact-inco">
      	<li>
      		<a class="fa fa-facebook fa-3x" href="#"></a>
      	</li>
      	<li>
      		<a class="fa fa-github fa-3x"   href="#"></a>
      	</li>
      	<li>
      		<a class="fa fa-twitter fa-3x" href="#"></a>
      	</li>
      </ul>
      <hr>
      <p>copyright 2016</p>
		</div>
	</div>
</body>
</html>